  <template>
  <div>
    <h4 class="font-weight-bold py-3 mb-4">
      应收账款列表
    </h4>

    <hr class="border-light container-m--x mt-0 mb-5">
    <p> {{$store.state.count}} This page is an example of basic layout. For more options use <strong>Vue starter template generator</strong> in the docs.</p>
    <p>
      <button class="btn btn-primary btn-lg" v-on:click="getLoad()">Button</button>
    </p>
    <BlockUI :html="loadingHtml" v-if="loadingMask.show" />
    
  </div>
</template> 

<style src="@/vendor/libs/spinkit/spinkit.scss" lang="scss"></style>

<script>
import Vue from 'vue'
import BlockUI from 'vue-blockui'
import {mapGetters,mapState,mapMutations} from 'vuex'

Vue.use(BlockUI)

export default {
  name: 'receivable',
  metaInfo: {
    title: '应收账款列表'
  },
  computed: {
    ...mapState({
      'loadingMask': state => state.global.widgets.loadingMask,
      'loadingHtml': state => {
        let loadingMask = state.global.widgets.loadingMask;
        return loadingMask.type.replace('{{message}}',loadingMask.tips)
      }
    })
  },
  data: () => ({
    html : '',
    loading : false
  }),
  methods : {
    getLoad: function(){
      //  this.loading = true
      this.showLoadingMask()
      setTimeout(() => { 
        this.hideLoadingMask() 
      }, 4000)
    },
    ...mapMutations([
      'showLoadingMask',
      'hideLoadingMask'
    ])
  }
}
</script>
